<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
			<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
				<link rel="stylesheet" href="css/main.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		
	</head>
<style>
	.mui-content a {
		color: #555555;
		}
	.mui-content a.active {
	color: #007aff;
	}
	.mui-plus .plus{
				display: inline;
			}
			
			.plus{
				display: none;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			
			span.mui-icon {
				font-size: 12px;
				color: #333333;
				margin-left: -15px;
				padding-right: 10px;
			}
			.mui-popover {
				height: 350px;
			}
			
			
</style>
	<body>
		<div id="app">

          <header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商家详情</h1>
		</header>
	<div class="mui-content">
		<div id="slider" class="mui-slider"  style="height:249px;">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img :src="picUrlLast">
					</a>
				</div>
				<div class="mui-slider-item" v-for="(p, index)  in picList">
					<a href="#">
						<img :src="p.picUrl">
					</a>
				</div>
				
				
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img :src="picUrlone">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator" >
				<!--<div class="mui-indicator mui-active"></div>-->
				<div class="mui-indicator" v-for="(p, index)  in picList"></div>
				
			</div>
		</div>
		<div>
		<ul class="mui-table-view" >
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left"  style="border-radius: 30px;" :src="picUrlone">
						<div class="mui-media-body">
							<span class="mui-badge">{{id}}</span> &nbsp;<span >{{business_name}}</span>
							<p class='mui-ellipsis'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{business_address}}</p>
						</div>
					</a>
				</li>
				</ul>
		</div>
			<div class="">
	    	<ul class="mui-table-view detail-tpsl" style="border-bottom: 0px solid #CCCCCC;">
			<li  class="mui-table-view-cell  " style='float:left;'>
				<div >{{numberOfVote}}</div>
				<p class='mui-ellipsis' style="border-bottom: 0px;">当前票数</p>
			</li>
			<li class="mui-table-view-cell " style='float:left;border-right: 1px solid #ccc;border-left: 1px solid #ccc;'>
				<div>{{nowpm}}</div>
				<p class='mui-ellipsis' >当前排名</p>
			</li>
			<li class="mui-table-view-cell "   >
					<div>{{espaceVote}}</div>
				    <p class='mui-ellipsis'>距上一名还差</p>
			</li>
		</ul>
			</div>
			
	  	<div >
       <a href="#middlePopover"><span class="mui-icon-extra mui-icon-extra-lamp" style="font-size: 15px;">投票须知</span></a>
				
		</div>
			<div id="middlePopover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<h5 style="text-align: center;"><span class="mui-icon-extra mui-icon-extra-dictionary" style="width:10px;height: 10px;"></span></h5>
							<h5 style="text-align: center;font-size:12px;">投票须知</h5>
							<p style="font-size: 10px;text-indent: 22px;">
							<span  >为培育饶河县乡村旅游发展主体，提升“农家乐”管理和服务水平，全力打造乡村旅游特色品牌，强化“农家乐”在旅游产业发展和农民脱贫过程中示范带动作用，饶河县旅游局特举办“群众最喜爱的农家乐”评选活动。此次评选活动旨在培育和壮大饶河县乡村旅游发展主体，切实提升“农家乐”服务质量和管理水平，按照“部门主导、多元参与、突出特色、打造品牌”原则，加强组织引导，积极动员社会力量，盘活乡村资源，打造不同风格的农家乐品牌，促进全县乡村旅游业快速发展。本次评选活动，经严格初选，共有19家优质农家乐入围此次评选。评选已拉开序幕，网友可通过饶河旅游局微信公众平台参与投票评选，投票时间2018.06.20—2018.06.30。每人每天一票，大家赶紧动起手指，速速转发，为您最爱的农家乐投上宝贵的一票吧！
							</span>
							</p>
						</div>
					</div>

		         </div>
		    </div>
		<div id="info"></div>
		<div style="margin-top:4px;"> 

	    <!--<button type="button"  id="alertBtn" @click="addvote(1)" class="mui-btn mui-btn-primary mui-btn-block  mui-icon-extra mui-icon-extra-heart">投票</button>-->
	    <button type="button"  id="alertBtn"  class="mui-btn mui-btn-primary mui-btn-block  mui-icon-extra mui-icon-extra-heart">投票</button>
     </div>
     
       </div>
   </div>
		<script type="text/javascript" charset="utf-8">
 // 实例化vue对象（MVVM中的View Model）
   var id = window.location.href.split("=")[1];
 console.log("传入详情页面"+id);
    var app = new Vue({
      el: '#app',
      data: {
          
          nowpm:"0",
          numberOfVote:0,
          espaceVote:0,
          business_name:"",
          business_address:"",
          picList:"",
          picUrlone:"",
          picUrlLast:"",

          
      },
       beforeCreate: function () {
//              console.group('beforeCreate 创建前状态===============》');
//             console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
//             console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
//             console.log("%c%s", "color:red","message: " +. this.message)  
        },
        created: function () {
            var url = "http://59.110.165.13:7500/business/findBusinessOne";
        
                axios.post(url,{id:id}).then(function(res) {
                	console.log(res)
                      console.log(res,app.message);
                      console.log('request',res.data.result.list.business_address)
                      app.id = res.data.result.list.id;
                    app.message = res;
                    app.espaceVote = res.data.result.espaceVote;
                    app.nowpm = res.data.result.nowPm;
                    app.numberOfVote= res.data.result.list.numberOfVote
                    app.business_name=res.data.result.list.business_name
                    app.business_address=res.data.result.list.business_address;
                    app.picList = res.data.result.list.picList;
                    app.picUrlone = app.picList[0].picUrl;
                    app.picUrlLast = app.picList[app.picList.length-1].picUrl;
                    console.log(app.picUrlLast);

                });
        },
         methods:{
                addvote:function(num){
//                  if(num!=''){
////                  	this.numberOfVote+=num;
//                  	this.espaceVote=this.espaceVote -  num;
//                   }
//                  else{
////                      this.numberOfVote++;
//                      this.espaceVote--;
//                  }
                 var url = "http://59.110.165.13:7500/business/businessVote";
                   axios.post(url,{id:id}).then(function(res) {
                	console.log(res);
                    app.numberOfVote= res.data.result.pd.numberOfVote;
                });   
                }
            }
    })
              mui.init();
			
		document.getElementById("alertBtn").addEventListener('tap', function() {
				mui.alert('感谢您的支持', '投票成功！', function() {
//					info.innerText = '你刚关闭了警告框';
					app.addvote(1);
				});
			});
			
			
		</script>
	</body>

</html>